<template>
      <el-form v-if="!loading" ref="formRef" :model="formState" class="form-body" label-suffix="：" label-width="auto">
          <el-form-item v-show="page" :rules="[{ required: true, message: '请选择卡类型!' }]" label="卡类型">
              <el-radio-group v-model="formState.account_type" @change="onChange">
                  <el-radio-button v-for="item in account_type_list" :value="item.account_type">{{ item.account_type_text }}</el-radio-button>
              </el-radio-group>
          </el-form-item>
          <el-form-item :rules="[{ required: true, message: '请输入真实姓名!' }]" label="真实姓名" prop="account_name">
              <el-input v-model="formState.account_name" placeholder="请输入真实姓名" />
          </el-form-item>
          <el-form-item :label="accountPlaceholder+'号'" :rules="accountNoRules" prop="account_no">
              <el-input v-model="formState.account_no" :placeholder="'请输入'+accountPlaceholder" />
          </el-form-item>
          <el-form-item v-if="formState.account_type === 1" label="分行名称" prop="account_no">
              <el-input v-model="formState.bank_branch" placeholder="请输入分行名称" />
          </el-form-item>
          <el-form-item v-if="formState.account_type === 1" label="银行卡详情" prop="bank_name">
              <el-input v-model="formState.bank_name" :rows="4" placeholder="请选择银行卡账号" type="textarea" />
          </el-form-item>
      </el-form>
</template>
<script lang="ts" setup>

import { ref, computed, shallowRef, onMounted } from "vue";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import type { AccountFormState, AccountTypeList } from "@/types/merchant/capitalfund/account.d";
import { getAccount, updateAccount, getAccountConfig } from "@/api/merchant/capitalfund/account";
// 父组件回调
const emit = defineEmits([
    "submitCallback", //确认后回调
    "update:confirmLoading", //确认按钮的loading状态
    "close" //关闭弹窗
]);
const props = defineProps({
  act: {
      type: String,
      default: ""
  }, id: {
      type: Number,
      default: 0
  }, type: {
      type: Number,
      default: 1
  }, page: {
      type: Number,
      default: 1
  },
  isDialog: Boolean
});
const loading = ref<boolean>(true);
const query = useRouter().currentRoute.value.query;
const action = ref<string>(props.isDialog ? props.act : String(query.act));
const id = ref<number>(props.isDialog ? props.id : Number(query.id));
const operation = action.value === "add" ? "create" : "update";
const formRef = shallowRef();
const formState = ref<AccountFormState>({
    account_type: 1
});
const accountPlaceholder = computed(() => {
  switch (formState.value.account_type) {
      case 1:
          return "银行卡";
      case 2:
          return "支付宝";
      case 3:
          return "微信";
      default:
          return "";
  }
});
const onChange = async () => {
  await formRef.value.resetFields();
};
const identityRules = computed(()=>{
  return [
      { required: true, message: '请输入身份证号', trigger: 'blur' }, // 必填验证
      {
          validator: (rule:any, value:any, callback:any) => {
              const regExp = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
              if (!regExp.test(value)) {
                  callback(new Error('请输入正确的身份证号码'));
              }else {
                  callback();
              }
          },
          trigger: 'blur' // 触发方式，可以是 blur、change等
      }
  ];
})
const accountNoRules = computed(()=>{
  return [
      { required: true, message: '请输入'+accountPlaceholder.value+'号'+'!', trigger: 'blur' }, // 必填验证
      {
          validator: (rule:any, value:any, callback:any) => {
              const regExp = /^\d{6,}$/;
              if (!regExp.test(value)&&formState.value.account_type===1) {
                  callback(new Error('请输入正确的银行卡号'));
              }else {
                  callback();
              }
          },
          trigger: 'blur' // 触发方式，可以是 blur、change等
      }
  ];
})

const onSubmit = async () => {
    await formRef.value.validate();
  try {
      emit("update:confirmLoading", true);
      const result = await updateAccount(operation, {id: id.value, ...formState.value });
      await formRef.value.resetFields();
      message.success(result.message);
      formState.value.account_type = 1;
      emit("submitCallback", result);
  } catch (error: any) {
      message.error(error.message);
  } finally {
    emit("update:confirmLoading", false);
  }
};
// 表单提交
const onFormSubmit = () => {
    onSubmit();
};
const fetchInfo = async () => {
  try {
      loading.value = true;
      const result = await getAccount(action.value, { id: id.value });
      Object.assign(
          formState.value,
          result.item
      );
  } catch (error: any) {
      message.error(error.message);
  } finally {
      loading.value = false;
  }
};
const account_type_list = ref<AccountTypeList[]>([])
const fetchAccountConfig = async () => {
    try {
        const result = await getAccountConfig();
        account_type_list.value = result.account_type_list
    } catch (error: any) {
        message.error(error.message);
    }
};
onMounted(() => {
    if (action.value === "detail") {
        // 获取详情数据
        fetchInfo();
    } else {
        loading.value = false;
    }
    fetchAccountConfig()
});
defineExpose({ onFormSubmit });
</script>
<style lang="less" scoped>

</style>
